<template>
  <div class="mystore">
      <el-container class="Box">
        <el-header class="titlebox" height="100px">
                <div class="titleText">
                    <span style="font-weight:700">我的商店</span>
                </div>
                <div class="btnBox">
                    <span>
                        <el-button type="primary" @click="addsell">新增出售</el-button>
                        <el-button @click="backHome()">返回首页</el-button>
                    </span>
                </div>
        </el-header>
        <el-main class="mainbox">
            <el-tabs v-model="activeName" type="card" @tab-click="handleClick" class="innerbox" v-show="textBox">
                <el-tab-pane label="待售出" name="first" class="innerItem">
                    <div class="box-card" v-for="item of this.orderlist" :key="item.id">
                        <el-row :gutter="10">
                            <el-col :span="6" >
                                <img :src="baseurl+item.picpath" class="imgBox">
                            </el-col>
                            <el-col :span="18">
                                <div class="infoBox">
                                    <div class="message">
                                        <span>{{item.title}}</span>
                                    </div>
                                    <div>
                                        <span class="text_titile">价格：</span>
                                        <span style="color:red;font-weight:700;font-size:24px"><span style="font-size:16px">￥&nbsp;</span>{{item.price}}</span>
                                    </div>
                                    <div>
                                        <span class="text_titile">出售地：</span>
                                        <span class="content_little">{{item.fromwhere}}</span>
                                    </div>
                                    <div>
                                        <span class="content_little">{{item.username}}</span>
                                        <span style="padding-left:200px">
                                            <span class="text_titile">联系电话:</span>
                                            <span class="content_little">{{item.tel}}</span>
                                        </span>
                                    </div>
                                    <div>
                                        <span style="color:orange">待出售</span>
                                        <span>
                                            <el-button type="danger" style="margin-left:560px" @click="delect(item.id)">删除</el-button>
                                        </span>
                                    </div>
                                </div>
                            </el-col>
                        </el-row>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="已售出" name="second" class="innerItem">
                    <div class="box-card" v-for="item of this.orderlist" :key="item.id">
                        <el-row :gutter="10">
                            <el-col :span="6" >
                                <img :src="baseurl+item.picpath" class="imgBox">
                            </el-col>
                            <el-col :span="18">
                                <div class="infoBox">
                                    <div class="message">
                                        <span>{{item.title}}</span>
                                    </div>
                                    <div>
                                        <span class="text_titile">价格：</span>
                                        <span style="color:red;font-weight:700;font-size:24px"><span style="font-size:16px">￥&nbsp;</span>{{item.price}}</span>
                                    </div>
                                    <div>
                                        <span class="text_titile">出售地：</span>
                                        <span class="content_little">{{item.fromwhere}}</span>
                                    </div>
                                    <div>
                                        <span class="content_little">{{item.username}}</span>
                                        <span style="padding-left:200px">
                                            <span class="text_titile">联系电话:</span>
                                            <span class="content_little">{{item.tel}}</span>
                                        </span>
                                    </div>
                                    <div>
                                        <span style="color:orange">已出售</span>
                                        <span>
                                            <el-button type="danger" style="margin-left:560px" @click="delect(item.id)">删除</el-button>
                                        </span>
                                    </div>
                                </div>
                            </el-col>
                        </el-row>
                    </div>
                </el-tab-pane>
            </el-tabs>
            <div class="innerbox" v-show="sellBox">
                <div style="height:100px;overflow:hidden">
                    <div class="addSell">新增出售</div>
                    <div class="backText" @click="back()">返回<i class="el-icon-arrow-right"></i></div>
                </div>
                <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm">
                    <el-divider content-position="left"><span class="divider">商品图片</span></el-divider>
                    <el-form-item label="商品图片" prop="addPicPath">
                        <el-upload
                          class="upload-demo"
                          ref="upload"
                          :limit="1"
                          accept=".jpg,.png"
                          action="/api/goods/upload"
                          :headers="headers"
                          :before-upload="beforeup"
                          :on-success="backinfo"
                          :on-error="errorinfo"
                          :file-list="fileList"
                          :auto-upload="false"
                          >
                          <el-button slot="trigger" size="small" type="primary">选取图片</el-button>
                          <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
                          <span style="color:#555;font-size:12px">&nbsp;&nbsp;已上传{{this.number}}张图片，可继续上传，建议上传3-5张图片</span>
                          <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，一次只能上传1张</div>
                        </el-upload>
                    </el-form-item>
                    <el-divider content-position="left"><span class="divider">出售信息</span></el-divider>
                    <el-form-item label="商品标题" prop="title">
                        <el-input v-model="ruleForm.title"></el-input>
                    </el-form-item>
                    <el-form-item label="品牌" prop="brand">
                        <el-select v-model="ruleForm.brand" placeholder="请选择品牌..." @change="getSeries">
                            <el-option :label="brand.name" :value="brand.id" v-for="brand of brandlist" :key="brand.id"></el-option>
                        </el-select>
                    </el-form-item>
                     <el-form-item label="系列" prop="series">
                        <el-select v-model="ruleForm.series" placeholder="请选择系列...">
                            <el-option :label="series.name" :value="series.id"  v-for="series of serieslist" :key="series.id"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="商品价格" prop="price">
                        <el-input v-model="ruleForm.price"></el-input>
                    </el-form-item>
                    <el-form-item label="是否包邮" prop="includepostage">
                        <el-radio-group v-model="ruleForm.includepostage">
                            <el-radio label="1">是</el-radio>
                            <el-radio label="0">否</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="出售地" prop="from">
                        <el-input v-model="ruleForm.from"></el-input>
                    </el-form-item>
                    <el-form-item label="联系方式" prop="price">
                        <el-input v-model="ruleForm.name"></el-input>
                    </el-form-item>
                    <el-form-item label="商品简介" prop="info">
                        <el-input type="textarea" v-model="ruleForm.info" style="width:960px"></el-input>
                    </el-form-item>
                    <el-divider content-position="left"><span class="divider">手机参数</span></el-divider>
                    <el-form-item label="成色" prop="level">
                        <el-input v-model="ruleForm.level"></el-input>
                    </el-form-item>
                    <el-form-item label="颜色" prop="color">
                        <el-input v-model="ruleForm.color"></el-input>
                    </el-form-item>
                    <el-form-item label="机身内存" prop="fuselagememory">
                        <el-input v-model="ruleForm.fuselagememory"></el-input>
                    </el-form-item>
                    <el-form-item label="运行内存" prop="runmemory">
                        <el-input v-model="ruleForm.runmemory"></el-input>
                    </el-form-item>
                    <el-form-item label="前摄像头" prop="beforecamera">
                        <el-input v-model="ruleForm.beforecamera"></el-input>
                    </el-form-item>
                    <el-form-item label="后摄像头" prop="aftercamera">
                        <el-input v-model="ruleForm.aftercamera"></el-input>
                    </el-form-item>
                    <el-form-item label="屏幕分辨率" prop="screenresolution">
                        <el-input v-model="ruleForm.screenresolution"></el-input>
                    </el-form-item>
                    <el-form-item label="最大扩展内存" prop="maxmemory">
                        <el-input v-model="ruleForm.maxmemory"></el-input>
                    </el-form-item>
                    <el-form-item class="btnBox">
                        <el-button type="primary" @click="submitForm('ruleForm')" class="btn1">确定</el-button>
                        <el-button @click="resetForm('ruleForm')" class="btn2" style="margin-left:20px">取消</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </el-main>
        <el-dialog title="请支付发布费用" :visible.sync="dialogFormVisible">
            <el-form :model="Payform">
            <el-form-item label="商品标题" :label-width="formLabelWidth" class="dialogBox">
                <el-input disabled v-model="this.ruleForm.title"></el-input>
            </el-form-item>
            <el-form-item label="发布费用" :label-width="formLabelWidth" class="dialogBox">
                <el-input disabled v-model="payprice"></el-input>
            </el-form-item>
            <div class="tip">注：发布费用为商品价格的0.3%</div>
            <el-form-item label="支付密码" :label-width="formLabelWidth"  class="dialogBox">
                <el-input type="password" v-model="Paypassword" autocomplete="off" :show-password="true" placeholder="请输入支付密码..."></el-input>
            </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="surepay">确 定</el-button>
            </div>
        </el-dialog>
     </el-container>
  </div>
</template>

<script>
export default {
  name: 'mystore',
  data () {
    return {
        activeName: 'first',
        textBox: true,
        sellBox: false,
        dialogFormVisible: false,
        formLabelWidth: '80px',
        fileList: [],
        orderlist: [],
        status: 0,
        serieslist: [],
        brandlist: [],
        path: [],
        Payform: {},
        payprice: '',
        userID: '',
        Paypassword: '',
        number: 0,
        picurl: '',
        baseurl: 'http://123.56.11.253:8181/transaction/',
        ruleForm: {
            aftercamera: "",
            beforecamera: "",
            belongto: this.userID, // 用户id
            brand: '',
            color: "",
            from: "",
            fuselagememory: "",
            includepostage: '',
            info: "",
            level: "",
            maxmemory: "",
            price: '',
            runmemory: "",
            screenresolution: "",
            series: '',
            title: ""
        },
        rules: {
          title: [
            { required: true, message: '请输入商品标题', trigger: 'blur' },
            { min: 5, message: '不得少于5个字符', trigger: 'blur' }
          ],
          brand: [
            { required: true, message: '请选择品牌', trigger: 'change' }
          ],
          series: [
            { required: true, message: '请选择系列', trigger: 'change' }
          ],
          price: [
            { required: true, message: '请输入价格', trigger: 'blur' }
          ],
          info: [
            { required: true, message: '请填写商品简介', trigger: 'blur' }
          ],
          from: [
            { required: true, message: '请填写出售地', trigger: 'blur' }
          ],
          brand: [
            { required: true, message: '请选择是否包邮', trigger: 'change' }
          ],
          level: [
            { required: true, message: '请填写商品成色', trigger: 'blur' }
          ],
          fuselagememory: [
            { required: true, message: '请填写商品的机身内存', trigger: 'blur' }
          ],
          color: [
            { required: true, message: '请填写商品的颜色', trigger: 'blur' }
          ],
          beforecamera: [
            { required: true, message: '请输入商品前摄像头的像素', trigger: 'blur' }
          ],
          aftercamera: [
            { required: true, message: '请输入商品后摄像头的像素', trigger: 'blur' }
          ],
          runmemory: [
            { required: true, message: '请填写商品的机身运行内存', trigger: 'blur' }
          ],
          screenresolution: [
            { required: true, message: '请输入商品的屏幕分辨率', trigger: 'blur' }
          ],
          maxmemory: [
            { required: true, message: '请输入商品的最大扩展内存', trigger: 'blur' }
          ]
        }
    }
  },
  components: {},
  computed: {
    payprice () {
      return this.ruleForm.price*0.003
    }
  },
  created () {
      this.getCookies()
      this.getOrder()
      this.getBrand()
  },
  computed: {
    headers () {
      return {
        'token': sessionStorage.getItem('usertoken')
      }
    }
  },
  methods: {
    getCookies () {
      this.userID = sessionStorage.getItem('userId')
    },
    // 切换板块
    handleClick(tab, event) {
      console.log(tab, event)
      if (tab.label === "待售出") {
        this.status = 0
        this.getOrder()
      } else {
        this.status= 1
        this.getOrder()
      }
    },
    // 获取订单
    async getOrder () {
      const AUTH_TOKEN = sessionStorage.getItem('usertoken')
      this.$http.defaults.headers.common['token'] = AUTH_TOKEN
      const res = await this.$http.get(`goods/notSell?id=${this.userID}&pageNow=1&pageSize=9999&status=${this.status}`)
      console.log(res)
      const {msg,status,data:{records}} = res.data
      if( status === 200) {
        this.orderlist = records
        this.picurl = records.picpath
      } else {
        console.log(msg)
      }
    },
    // 删除订单
    delect (id) {
      const oid = id
      this.$confirm('此操作将删除该订单, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        console.log(oid)
        const res = await this.$http.delete(`goods/delete?id=${oid}`)
        console.log(res)
        const {msg, status} = res.data
        if (status === 200) {
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          this.getOrder()
        } else {
          this.$message.error(msg)
        }
      }).catch(() => {
        // this.$message({
        //   type: 'info',
        //   message: '已取消删除'
        // })
      })
    },
    // 获取所有品牌
    async getBrand () {
      const res = await this.$http.get('brand/selectAll?pageNow=1&pageSize=9999')
      console.log(res)
      const {msg,status,data:{records}} = res.data
      if(status === 200) {
        this.brandlist = records
      } else {
        console.log(msg)
      }
    },
    // 获取该品牌下的所有系列
    async getSeries (id) {
      console.log(id)
      const res = await this.$http.get(`series/selectAllByBrand?parent=${id}&pageNow=1&pageSize=9999`)
      console.log(res)
      const {msg,status,data:{records}} = res.data
      if(status === 200) {
        this.serieslist = records
      } else {
        console.log(msg)
      }
    },
    // 新增出售按钮
     addsell () {
        this.textBox = false
        this.sellBox = true
    },
    //  提交按钮 
    submitForm(formName) {
        this.$refs[formName].validate(async (valid) => {
          if (valid) {
            if(this.path.length !== 0) {
              // console.log(123)
              console.log(this.ruleForm)
              this.ruleForm.belongto = this.userID
              const from={
              addBaseVo : this.ruleForm,
              addPicPath: {
                  path: this.path
                } 
              }
              console.log(from)
              const res = await this.$http.post('goods/add', from)
              console.log(res)
              if (res.data.status === 200) {
                this.$message.success("出售成功！")
                this.textBox = true
                this.sellBox = false
                this.ruleForm = {}
                this.path = []
                this.getOrder()
              } else {
                this.$message.error("出售失败！")
              }
            } else {
              // console.log('000')
              this.$message.warning('请先上传图片！')
            }
          } else {
            console.log('error submit!!');
            return false;
          }
        });
    },
    // 取消
    resetForm(formName) {
        this.$refs[formName].resetFields()
        this.textBox = true
        this.sellBox = false
    },
    // 返回
    back () {
        this.textBox = true
        this.sellBox = false
    },
    // 返回首页
    backHome () {
        this.$router.push({name: 'home'})
    },
    // 上传图片
    backinfo (response, file, fileList) {
      this.fileList = []
      console.log('上传成功', response)
      if (response.status === 200) {
        this.number = Number(this.number) + 1
        this.$message.success('上传成功！')
        this.path.push(response.data)
      } else {
        this.$message.error(response.msg)
      }
    },
    // 上传失败回调事件
    errorinfo (response, file, fileList) {
      this.$message.error('上传失败，请重试！')
    },
    // 上传之前的验证
    beforeup (file) {
      console.log(file)
      this.file = file.name
      console.log('this.headers', this.headers)
      const extension = file.name.split('.')[1] === 'jpg'
      const extension2 = file.name.split('.')[1] === 'png'
      const isLt2M = file.size / 1024 / 1024 < 10
      if (!extension && !extension2) {
        this.$message.error('上传模板只能是 jpg、png格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传模板大小不能超过 10MB!')
      }
    },
    // 上传文件
    submitUpload () {
      let _this = this
      setTimeout(function () {
        _this.$refs.upload.submit()
      }, 200)
    },
    // 支付发布费用
    surepay () {
        this.dialogFormVisible = false
    },
  }
}
</script>

<style scoped lang="stylus">
.Box
  height 100%
  min-width 1520px
  margin 0 0 0 0 !important
  .titlebox
    background-color #fff
    .titleText
      font 700 24px/100px microsoft yahei
      color #666
      padding-left 120px
      display inline-block
      width 1000px
      margin-top 0 !important
    .btnBox
      text-align right
      line-height 130px
      padding-right 150px
      padding-top 40px
      display inline-block
      margin-top 0 !important
  .mainbox
    border-top 1px solid #aaa
    padding 15px 150px 0 150px
    background-color #f2f2f2
    height 100%
    .innerbox
      background-color #fff
      border-radius 5px
      padding 10px 10px 10px 10px
      min-height 600px
    .box-card 
        width 1000px
        margin 10px 50px 20px 20px
        border-radius 4px
        border 1px solid #bbb
        padding 10px 0 10px 20px
        height 200px
        overflow hidden
        .imgBox
          width 220px
          height 200px
        .infoBox
          padding 20px 0 20px 10px
          div
            padding 5px 0 5px 18px
          .message
            color #222
            font-size 18px
            line-height 20px
            padding 0 5px 0px 5px
            margin-bottom 10px
            height 30px
            overflow hidden
          .text_titile
            color #aaa
            font-size 14px
          .content_little
            color #222
            font-size 16px
.addSell
  display inline-block
  font-size 20px
  font-weight 700
  color #555
  line-height 100px
  padding-left 20px
.backText
  display inline-block
  margin-left 1000px
  font-size 14px
  color #666
.backText:hover
  color #409EFF
  cursor pointer
.demo-ruleForm
  padding 0 40px 20px 40px 
  .el-input
    width 960px
.divider
  color #aaa
  font-size 18px
.upload-demo
  width 600px
.btnBox
  text-align center
  .btn1,.btn2
    margin-top 60px
    width 120px
.dialogBox
  width 500px
  padding-left 80px
.tip
    font-size 12px
    color red
    padding-left 160px
    margin-top -14px
    padding-bottom 14px
</style>
